<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品功能</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
    <link href="https://cdn.bootcss.com/Swiper/4.4.0/css/swiper.min.css" rel="stylesheet">
</head>
<body>
<header class="header">
    <section class="logo">
        <div class="logo-img">
            <img src="images/logo.png" alt="">
        </div>

        <span class="btn" id="btn"></span>
    </section>
    <!--导航-->
    <section class="nav">

        <nav>
            <a href="index.html">
                <img src="images/index.png" alt="">产品首页
            </a>
            <a href="product.html">
                <img src="images/gn.png" alt="">产品功能
            </a>
            <a href="buy.html">
                <img src="images/money.png" alt="">产品定价
            </a>
            <a href="pctip.html">
                <img src="images/pc.png" alt="">实际功能请使用PC端体验
            </a>
        </nav>
    </section>

</header>
    <div class="product-wrap mar88">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/article.png" alt="">
                    <h3>内容发布</h3>
                    <p>视频&文章一键发布</p>
                    <p>覆盖90%主流平台</p>
                </div>
                <div class="swiper-slide">
                    <img src="images/data.png" alt="">
                    <h3>数据统计</h3>
                    <p>全网数据监测统计</p>
                    <p>多维度数据分析</p>
                </div>
                <div class="swiper-slide">
                    <img src="images/marke.png" alt="">
                    <h3>精准营销</h3>
                    <p>依靠大数据建立用户标签画像</p>
                    <p>精准投放与数据追踪</p>
                </div>
                <div class="swiper-slide">
                    <img src="images/team.png" alt="">
                    <h3>团队管理</h3>
                    <p>权限分明的角色管理</p>
                    <p>清晰明朗的组织架构</p>
                </div>
            </div>
        </div>
    </div>
<footer class="footer">
    <a>客服微信vidtoto</a>
    <img src="images/wechat-code.png" alt="" class="wechat">
    <p><img src="images/beian.png" alt="">闽公网安备 35020302033034号</p>
    <p>©闽ICP备13018967  厦门市女帝信息科技有限公司</p>
</footer>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.4.0/js/swiper.min.js"></script>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        autoplay: {
            delay: 3000,
            disableOnInteraction:false,// 切换后自己自动执行autoplay
        },//可选选项，自动滑动
        loop: true, // 循环模式选项
    })
    $('#btn').click(function () {
        if($('.nav').is(':hidden')){
            $('.nav').css({'display':'block'})
            $(this).css({'background':"url('../images/close.png')no-repeat"})
        }else{
            $('.nav').css({'display':'none'})
            $(this).css({'background':"url('../images/more.png')no-repeat"})
        }
    })
</script>
</html>
